<template>
	<div>
	  <el-card class="login-form-layout">
	    <el-form autoComplete="on"
	             :model="loginForm"
	             :rules="loginRules"
	             ref="loginForm"
	             label-position="left">
	      <div style="text-align: center">
	        <!-- <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon> -->
	      </div>
	      <h2 class="login-title color-main">mall-admin-web</h2>
	      <el-form-item prop="username">
	        <el-input name="username"
	                  type="text"
	                  v-model="loginForm.username"
	                  autoComplete="on"
	                  placeholder="请输入用户名">
	        <span slot="prefix">
	          <!-- <svg-icon icon-class="user" class="color-main"></svg-icon> -->
	        </span>
	        </el-input>
	      </el-form-item>
	      <el-form-item prop="password">
	        <el-input name="password"
	                  :type="pwdType"
	                  @keyup.enter.native="handleLogin"
	                  v-model="loginForm.password"
	                  autoComplete="on"
	                  placeholder="请输入密码">
	        <span slot="prefix">
	          <!-- <svg-icon icon-class="password" class="color-main"></svg-icon> -->
	        </span>
	          <span slot="suffix" @click="showPwd">
	          <!-- <svg-icon icon-class="eye" class="color-main"></svg-icon> -->
	        </span>
	        </el-input>
	      </el-form-item>
	      <el-form-item prop="vcode">
	        <el-input name="vcode"
	                  type="text"
	                  v-model="loginForm.vcode"
	                  autoComplete="on"
	                  placeholder="请输入验证码">
	        <span slot="prefix">
	          <!-- <svg-icon icon-class="user" class="color-main"></svg-icon> -->
	        </span>
	        </el-input>
			<img :src="vcodeImgUrl" @click="getVcode"/>
	      </el-form-item>
	      <el-form-item style="margin-bottom: 60px;text-align: center">
	        <el-button style="width: 45%" type="primary" @click.native.prevent="login('loginForm')">
	          登录
	        </el-button>
	        <el-button style="width: 45%" type="primary" @click.native.prevent="handleTry">
	          获取体验账号
	        </el-button>
	      </el-form-item>
	    </el-form>
	  </el-card>
	  <img src="../../assets/login_center_bg.png" class="login-center-layout">
	  <el-dialog
	    title="公众号二维码"
	    :visible.sync="dialogVisible"
	    :show-close="false"
	    :center="true"
	    width="30%">
	    <div style="text-align: center">
	      <span class="font-title-large"><span class="color-main font-extra-large">关注公众号</span>回复<span class="color-main font-extra-large">体验</span>获取体验账号</span>
	      <br>
	      <img src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg" width="160" height="160" style="margin-top: 10px">
	    </div>
	    <span slot="footer" class="dialog-footer">
	  <el-button type="primary" @click="dialogConfirm">确定</el-button>
	    </span>
	  </el-dialog>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				loginForm:{
					username:'admin',
					password:'admin'
				},
				loginRules:{
					username:[
						 { required: true, message: '请输入用户名称', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min:3,max:16,message:"密码要求在3到16之间" }
					]
				},
				pwdType: 'password',
				dialogVisible:false,
				vcodeUrl:this.$baseUrl+"auth/user/getVcode",
				vcodeImgUrl:null,
				userKey:null
			}
		},
		methods:{
		  getVcode(){
			 this.vcodeImgUrl = this.vcodeUrl+"?userKey="+this.userKey+"&r="+Math.random();
		  },
		  handleTry(){
			this.dialogVisible =true
		  },
			showPwd(){
				
			},
			  dialogConfirm(){
				this.dialogVisible =false;
			  },
			login(loginForm){
				this.$refs[loginForm].validate((valid) => {
				  if (valid) {
					this.loginForm.userKey=this.userKey;
					this.axios.post(this.$baseUrl+"auth/user/login",this.loginForm).then(res=>{
						console.log(res);
						if(res.data.result){
							localStorage.setItem("username",res.data.data.username);
							//保存tonken信息
							localStorage.setItem("token",res.data.data.token);
							//vuex保存登录用户的信息
							this.$store.commit('setUserInfo',res.data.data);
							this.$router.push("/index");
						}else{
							this.$message({
								message: res.data.msg,
								type:"warning"
							});
						}
					})
					
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			}
			
		},
		created(){
			this.axios.get(this.$baseUrl+"auth/user/loginInit").then(res=>{
				if(res.data.result){
					this.userKey=res.data.data;
					this.vcodeImgUrl = this.vcodeUrl+"?userKey="+this.userKey+"&r="+Math.random();
				}
			})
		}
	}
</script>

<style scoped>
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 360px;
    margin: 140px auto;
    border-top: 10px solid #409EFF;
  }

  .login-title {
    text-align: center;
  }

  .login-center-layout {
    background: #409EFF;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }
</style>